<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>会员精准营销</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/tabletable.css" rel="stylesheet" />
    <link href="../assets/css/content.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.min.js"></script>
          <script src="../assets/js/respond.min.js"></script>
          <![endif]-->
    <style type="text/css">
    .hyjzyx-jhlx{
      width: 100%;
      height: 33px;
    }
    .hyjzyx-jhlx div{
      float: left;
      margin-right: 10px;
      margin-top: 15px;
    }
    .hyjzflright{
      float: right;
      margin-right: 50px;
    }
    @media only screen and (max-width: 800px) {
      .hyjzflright{
        float: right;
        margin-right: 20px;
      }
    }
    @media only screen and (max-width: 700px) {
      .hyjzflright{
        float: left;
        margin-right: 0px;
      }
    }
    </style>
  </head>

  <body>
    <!--内容区域-->
    <div class="content">
      <div class="content-header col-md-12">
        <div class="con-header">
          <div class="col-md-10 col-sm-10 col-xs-10">
            <span class="content-title-pre"></span><span class="content-title-word">会员精准营销</span>
          </div>
        </div>
      </div>
      <div class="hyjzyx-jhlx">
        <div class="jhlx">
                  交互类型：
        </div>
        <div class="checkboxes checkno jhcheck" onclick="jhcheck(this);"></div>
        <div class="jhjh">交互</div>
        <div class="checkboxes checkno jhcheck" onclick="jhcheck(this);"></div>
        <div class="jhxf">消费</div>
      </div>
      <div class="jy_table_list col-md-12 mt20">
        <ul>
          <li class="active">48小时</li>
          <li>近一周</li>
          <li>近一月</li>
          <li>上月</li>
        </ul>
      </div>
      <div class="content_serach row">

        <select class="form-control serach_select">
          <option>会员等级</option>
          <option>会员等级</option>
          <option>会员等级</option>
          <option>会员等级</option>
          <option>会员等级</option>
        </select>

        <select class="form-control serach_select">
          <option>活跃门店</option>
          <option>活跃门店</option>
          <option>活跃门店</option>
          <option>活跃门店</option>
          <option>活跃门店</option>
        </select>

        <select class="form-control serach_select">
          <option>所在地区</option>
          <option>所在地区</option>
          <option>所在地区</option>
          <option>所在地区</option>
          <option>所在地区</option>
        </select>
        <button type="button" class="btn btn-info serach_btn hyjzflright">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
      </div>
      <div class="hyjzyx_contet_list mt20">
        <div class="row"></div>
        <div class="table-responsive">
          <table class="table responsive" id="mytable">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">
                  <div class="checkdis"></div>
                </th>
                <th class="secondta">序号</th>
                <th>姓名</th>
                <th>等级</th>
                <th>地区</th>
                <th>交互时间</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">
                  <div class="checkboxes checkno" onclick="checks(this);"></div>
                </td>
                <td class="secondta">01</td>
                <td>北京大圣烧烤店</td>
                <td>消费送积分</td>
                <td>1000</td>
                <td>二级</td>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr class="trtr">
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

            </tbody>
          </table>
        </div>

        <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
          <div class="page-page flr">
            <ul class="pagination">
              <li class="epage"><a href="#">上一页</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">...</a></li>
              <li class="epage"><a href="#">下一页</a></li>
            </ul>
          </div>
          <div class="page-num flr">共9页，每页10条</div>
        </div>
      </div>
      <div class="hyjzyx_contet_list mt20 hidden">
        <div class="row"></div>
        <div class="table-responsive">
          <table class="table responsive" id="mytabletwo">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">
                  <div class="checkdis"></div>
                </th>
                <th class="secondta">序号</th>
                <th>姓名</th>
                <th>等级</th>
                <th>地区</th>
                <th>交互时间</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">
                  <div class="checkboxes checkno" onclick="checks(this);"></div>
                </td>
                <td class="secondta">01</td>
                <td>北京大圣烧烤店</td>
                <td>消费送积分</td>
                <td>1000</td>
                <td>二级</td>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr class="trtr">
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

            </tbody>
          </table>
        </div>

        <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
          <div class="page-page flr">
            <ul class="pagination">
              <li class="epage"><a href="#">上一页</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">...</a></li>
              <li class="epage"><a href="#">下一页</a></li>
            </ul>
          </div>
          <div class="page-num flr">共9页，每页10条</div>
        </div>
      </div>
      <div class="hyjzyx_contet_list mt20 hidden">
        <div class="table-responsive">
          <table class="table responsive" id="mytable">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">
                  <div class="checkdis"></div>
                </th>
                <th class="secondta">序号</th>
                <th>姓名</th>
                <th>等级</th>
                <th>地区</th>
                <th>交互时间</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">
                  <div class="checkboxes checkno" onclick="checks(this);"></div>
                </td>
                <td class="secondta">01</td>
                <td>北京大圣烧烤店</td>
                <td>消费送积分</td>
                <td>1000</td>
                <td>二级</td>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr class="trtr">
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

            </tbody>
          </table>
        </div>

        <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
          <div class="page-page flr">
            <ul class="pagination">
              <li class="epage"><a href="#">上一页</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">...</a></li>
              <li class="epage"><a href="#">下一页</a></li>
            </ul>
          </div>
          <div class="page-num flr">共9页，每页10条</div>
        </div>
      </div>
      <div class="hyjzyx_contet_list mt20 hidden">
        <div class="table-responsive">
          <table class="table responsive" id="mytable">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">
                  <div class="checkdis"></div>
                </th>
                <th class="secondta">序号</th>
                <th>姓名</th>
                <th>等级</th>
                <th>地区</th>
                <th>交互时间</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">
                  <div class="checkboxes checkno" onclick="checks(this);"></div>
                </td>
                <td class="secondta">01</td>
                <td>北京大圣烧烤店</td>
                <td>消费送积分</td>
                <td>1000</td>
                <td>二级</td>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr>
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

                <tr class="trtr">
                  <td class="firsttd" valign="middle">
                    <div class="checkboxes checkno" onclick="checks(this);"></div>
                  </td>
                  <td class="secondta">01</td>
                  <td>北京大圣烧烤店</td>
                  <td>消费送积分</td>
                  <td>1000</td>
                  <td>二级</td>
                </tr>

            </tbody>
          </table>
        </div>

        <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
          <div class="page-page flr">
            <ul class="pagination">
              <li class="epage"><a href="#">上一页</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">...</a></li>
              <li class="epage"><a href="#">下一页</a></li>
            </ul>
          </div>
          <div class="page-num flr">共9页，每页10条</div>
        </div>
      </div>
    </div>

    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/echarts.common.min.js"></script>
    <script src="../assets/js/tabletable.js"></script>
    <script type="text/javascript">
    colorStyle();
            // 给奇数行和偶数行不同的颜色
      function colorStyle(){
        $(".mytable").find("tr:even").addClass("oushu");
        $(".mytable").find("tr:odd").addClass("jishu");
        $(".mytable").find("tr:odd td:first-child").addClass("jishu");
      }

      // 给第一列高度
      firstTrHeight()
      function firstTrHeight() {
        for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
          var trht = $(".mytable tr")[i].offsetHeight
          var domtr = $(".mytable tr")[i];
          // 有30px的边距
          $(domtr).children('td').height(trht - 30);
          $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
        };
        
      }
      // table切换选中第几个下面的第几个div显现
      $('.jy_table_list ul li').on('click', function() {
          var index = $(this).index();
          $('.jy_table_list ul li').removeClass("active")
          $('.jy_table_list ul li').eq(index).addClass("active")
          $('.hyjzyx_contet_list').addClass('hidden')
          $('.hyjzyx_contet_list').eq(index).removeClass("hidden")
          firstTrHeight();
        })
        //复选事件
      function checks(obj) {
        if($(obj).hasClass("checkno")) {
          $(obj).removeClass("checkno");
          $(obj).addClass("checkyes");
        } else {
          $(obj).addClass("checkno");
          $(obj).removeClass("checkyes");
        }
      }
      function jhcheck(obj){
        if($(obj).hasClass("checkno")) {
          $(obj).removeClass("checkno");
          $(obj).addClass("checkyes");
        } else {
          $(obj).addClass("checkno");
          $(obj).removeClass("checkyes");
        }
      }
    </script>
  </body>

</html>